<template>
    <apply-dialog class="ruleForm" :title="props.title" :show="props.show" @close="close" :no-push="false">
        <el-steps :active="detail.applyState>2?3:detail.applyState" finish-status="success" align-center>
            <el-step :title="ApplyState[1]" />
            <el-step :title="ApplyState[2]" />
            <el-step :title="`${ApplyState[3]}/${ApplyState[4]}/${ApplyState[5]}`" />
        </el-steps>
        <el-form label-width="100">
            <el-form-item label="休假类型">
                <div>{{detail.applyType === 0 ? '' :ApplyType[detail.applyType]}}</div>
            </el-form-item>
            <el-form-item label="休假时间" required>
                <div>{{detail.time}}</div>
            </el-form-item>
            <el-form-item label="休假时长">
                <div>{{detail.leaveTime}}天</div>
            </el-form-item>
            <el-form-item label="休假原因">
                <div>{{detail.reasons}}</div>
            </el-form-item>
            <el-form-item label="审批状态">
                <div>{{detail.applyState===0 ? '' : ApplyState[detail.applyState]}}</div>
            </el-form-item>
            <el-form-item label="审批人">
                <div>{{detail.curAuditUserName}}</div>
            </el-form-item>
        </el-form>
    </apply-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, watch, computed, PropType, nextTick, onMounted } from 'vue'
import { ApplyState, ApplyType } from "@/utils/enum"
import useCurrentInstance from "@/hook/useCurrentInstance"
import applyDialog from "@/components/Dialog.vue"

const props = defineProps({
    show: {
        type: Boolean,
        default: true,
        required: true
    },
    title: {
        type: String,
        default: '新增菜单',
        required: true
    },
    data: Object,
    // type: String
})
let detail = ref({
    applyType: 0,
    time: null,
    leaveTime: 0,
    reasons: '',
    applyState: 0,
    curAuditUserName: ''
})
const active = ref(1)

onMounted(() => {
    console.log('行数据', props.data)
    detail.value = props.data as any
})

// 监听是新增还是编辑
watch(() => props.data, (newValue, oldValue) => {
    console.log('数据', newValue, props.data)
    nextTick(() => {
        detail.value = props.data as any
    })
}, { immediate: true })
// watch(() => props.type, (newValue, oldValue) => {
//     let action = newValue ? newValue : 'create'
//     console.log(action)
//     if (action === 'edit') {
//         nextTick(() => {
//             applyData.value = props.leaveFormData
//         })
//     }
// }, { immediate: true })

// const { globalProperties: that } = useCurrentInstance()
// const handleDateChange = (type: 'endTime' | 'startTime', val: Date) => {
//     console.log(Object.prototype.toString.call(val))
//     const startTime = applyData.value.startTime
//     const endTime = applyData.value.endTime
//     if (!startTime || !endTime) return
//     if (startTime > endTime) {
//         that.$message.error("开始日期不能晚于结束日期")
//         applyData.value.leaveTime = 0
//         setTimeout(() => {
//             applyData.value[type] = ""
//         }, 0)
//     } else {
//         console.log(Number(endTime) - Number(startTime))
//         applyData.value.leaveTime = ((Number(endTime) - Number(startTime)) / (24 * 60 * 60 * 1000))
//     }
// }

// 表单设置

const emits = defineEmits(["close", "submit"])
const close = () => {
    emits("close")
}
</script>
<style lang='scss' scoped>
:deep(.el-dialog__body) {
    flex-direction: column;
}

.sign {
    display: flex;
    justify-content: center;
}
</style>